<template>
	<navigator class="product" url="/pages/goods/product">
		<view class="image-view">
			<image class="country" :src="item.country"></image>
			<image class="product-image" :src="item.goods_img"></image>
		</view>
		<view class="product-title">{{item.title}}</view>
		<view class="product-price">
			<text class="product-price-original">￥{{item.price}}</text>
			<text class="product-price-favour">￥{{item.originalPrice}}</text>
			<text class="product-tip">购买</text>
		</view>
	</navigator>
</template>

<style lang="scss">
.product-list { width:100%; display:flex; flex-wrap:wrap; flex-direction:row; }
.product { padding:20upx; display:flex; flex-direction:column; float:left; }
.image-view { 
	height:335upx; width:335upx; margin:12upx 0; position:relative;
	
	.country { width:36upx; height:36upx; position:absolute; z-index:9; left:0upx; top:0upx; }
	.product-image { height:335upx; width:335upx; }
}
.product-title { width:300upx; color:$font-color-666; word-break:break-all; display:-webkit-box; overflow:hidden; line-height:1.5; text-overflow:ellipsis; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.product-price { margin-top:10upx; font-size:28upx; line-height:1.5; position:relative; }
.product-price-original { color:#c70037; }
.product-price-favour { color:#888888; text-decoration:line-through; margin-left:10upx; }
.product-tip { position:absolute; right:10upx; background-color:#ff3333; color:#ffffff; padding:0 10upx; border-radius:5upx; }
</style>
<script>
export default {
	data() {
		return {

		}
	},
	props:['item'],
	methods: {

	},
}
</script>